import { NodeResizer, ResizeParams } from '@xyflow/react';
import { PdfNodeFunc } from '../../../components';
import { useEffect, useState } from 'react';
const DefaultSrc = "";
export const PdfImage: PdfNodeFunc = (node) => {
    const { data, selected } = node;
    const [width, setWidth] = useState(0);
    const [height, setHeight] = useState(0);
    const src = data?.src ?? DefaultSrc;
    useEffect(() => {
        setWidth(node?.width)
        setHeight(node?.height)
    }, [node?.width, node?.height])
    return (
        <>
            <NodeResizer
                color="#1890ff"
                isVisible={selected}
                onResize={(e: any, params: ResizeParams) => {
                    setWidth(params.width);
                    setHeight(params.height)
                }}
            />
            {
                !src && <svg width={width} height={height} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M992.17 77h-960c-16.57 0-30 13.43-30 30v810c0 16.57 13.43 30 30 30h960c16.57 0 30-13.43 30-30V107c0-16.57-13.43-30-30-30z m-30 60v525.87L671.24 375.64c-13.28-13.11-34.21-14.35-48.94-2.9L62.17 808.13V137h900z" fill="#121212" p-id="2102"></path><path d="M252.17 327m-100 0a100 100 0 1 0 200 0 100 100 0 1 0-200 0Z" fill="#121212" p-id="2103"></path></svg>
            }
            {src && <img style={{ width, height, ...data.style }} src={src}></img>}
        </>
    );
};
PdfImage.displayName = "Image";
PdfImage.defaultProps = { width: 100, height: 100 };